<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="layui/css/main.css">
  <style type="text/css">
    .noteView {
      border-radius: 20px;
      margin-bottom: 16px;
    }

    .noteHeaderImg {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      border-radius: 50%;
    }

    .noteImgView {
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 30px;
    }

    .noteViewImg {
      width: 200px;
      height: 200px;
      margin: 10px;
      object-fit: cover;
    }

    .noteViewUser {
      padding: 30px;
    }

    .noteViewNote {
      padding-bottom: 20px;
      padding-left: 30px;
      padding-right: 30px;
    }

    .noteImgViewL {
      max-width: 1000px;
      max-height: 800px;
    }
  </style>
</head>

<body>
<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="me.html" id="appUserName"></a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item layui-this">
    <a href="dashboard.html">恩爱广场<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="friends.html">好友列表</a>
  </li>
  <li class="layui-nav-item">
    <a href="our.html">我俩专属</a>
  </li>
  <li class="layui-nav-item">
    <a href="write.html">说点什么</a>
  </li>
  <li class="layui-nav-item">
    <a href="game.html">玩玩小游戏</a>
  </li>
</ul>
<br>
<div class="layui-container">
  <blockquote class="layui-elem-quote">美好的时刻值得永远铭记</blockquote>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md2">
      <div class="layui-panel" style="padding: 10px;border-radius: 20px;">
        <a href="me.html" style="padding: 10px;"><img src="/layui/headImg.jpeg" class="noteHeaderImg">刘华强</a>
        <h3 style="padding-left: 30px; padding-right: 30px; color: black;">今天又砍了一遍瓜摊老板，真的舒服</h3>
      </div>
    </div>
    <div class="layui-col-md8" id="notes">
    </div>
    <div class="layui-col-md2">
      <div class="layui-panel" style="padding: 10px;border-radius: 20px;">

      </div>
    </div>

  </div>
</div>


<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script src="layui/init.js"></script>
<script>
  layui.use(function () {
    var layer = layui.layer
    var $ = layui.$

    var notes = document.getElementById('notes')

    // 登录成功后请求说说
    $.ajax({
      type: "GET",
      url: "http://localhost/note/pull",
      headers: {
        token: localStorage.getItem('userToken')
      },
      success: function (data) {
        console.log("刚开始的data" + data)
        for (let index = 0; index < data.length; index++) {
          var str = JSON.stringify(data[index])
          var strObj = JSON.parse(str)
          console.log("反序列后的json" + strObj.files.length)
          console.log("files" + strObj.files)
          var noteViewList = document.createElement("div")
          noteViewList.className = "layui-panel noteView"
          var noteViewName = document.createElement("h2")
          var noteViewNote = document.createElement("h3")
          var noteImgView = document.createElement("div")
          noteViewName.innerHTML = '<img src="/layui/headImg.jpeg" class="noteHeaderImg">' +
                  strObj.userName
          noteViewName.className = "noteViewUser"
          noteViewNote.textContent = strObj.noteMsg
          noteViewNote.className = "noteViewNote"
          noteImgView.className = "noteImgView"
          noteImgView.id = "layer-photos-demo"
          noteViewList.appendChild(noteViewName)
          noteViewList.appendChild(noteViewNote)
          noteViewList.appendChild(noteImgView)
          for (let i = 0; i < strObj.files.length; i++) {
            console.log("files i" + strObj.files[i])
            img = document.createElement("img")
            img.src = strObj.files[i]
            img.className = "noteViewImg"
            noteImgView.appendChild(img)
          }
          notes.appendChild(noteViewList)
        }
        bindImgClick()
      },
      error: function (data) {
        console.log(data)
        layer.msg(JSON.stringify(data))
        window.location.replace("http://localhost/login.html");
      }
    });
    //绑定图片点击事件
    function bindImgClick() {
      $('#layer-photos-demo .noteViewImg').on('click', function () {
        var othis = $(this)
        var father = othis.parent().attr('id')
        console.log(father)
        console.log(othis.context)
        layer.open({
          type: 1,
          content: '<img src="' + othis.context.src + '"class="noteImgViewL">',
          anim: 1,
          shade: [0.8, '#393D49'],
          shadeClose: true,
          area: 'auto'

        });
      });
    }
  });
</script>
</body>

</html>